import React, { Component } from "react";
import "./Class.css";

export default class Class extends Component {
  constructor(props) {
    super(props);

    this.state = {
      msg: "hello world",
      box: "box",
      obj: {
        background: "blue",
      },
    };
  }

  render() {
    return (
      <div>
        <h2 className={[this.state.box, "box1"].join(" ")}>这是类组件</h2>
        {/* 多个类名时必须使用join（“ ”）合并类名 */}
        <h3 style={this.state.obj}>{this.state.msg}</h3>
      </div>
    );
  }
}

//1.类组件 使用快捷键 rcc生成
// 在类组件中 render函数 return的就相当于是 vue中的template
// 在类组件中有一个constructor 生成的快捷键是rconst
// 这个constructor中有一个this.state就相当于是 vue中的data，函数组件中没有，所以类组件用的比较多
// state中的数据使用的时候 需要this.state.xx

// 2.jsx语法 可以理解为vue中的模版语法
// 插值语句 {}
// 类名 className={} 注意没有引号了
// 行内央视style 必须是一个对象
// 注释 {/* */}

// 只要碰到js语法 就加上{}
